
<template>
  <div class="asset-transfer">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>资产调拨</span>
          <el-button type="primary" @click="handleAddTransfer">发起调拨</el-button>
        </div>
      </template>

      <!-- 搜索区域 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="调拨单号">
          <el-input v-model="searchForm.transferNo" placeholder="请输入调拨单号" clearable />
        </el-form-item>
        <el-form-item label="资产名称">
          <el-input v-model="searchForm.assetName" placeholder="请输入资产名称" clearable />
        </el-form-item>
        <el-form-item label="调出部门">
          <el-select v-model="searchForm.fromDepartment" placeholder="请选择调出部门" clearable>
            <el-option label="财务部" value="finance" />
            <el-option label="行政部" value="admin" />
            <el-option label="技术部" value="tech" />
            <el-option label="市场部" value="marketing" />
          </el-select>
        </el-form-item>
        <el-form-item label="调入部门">
          <el-select v-model="searchForm.toDepartment" placeholder="请选择调入部门" clearable>
            <el-option label="财务部" value="finance" />
            <el-option label="行政部" value="admin" />
            <el-option label="技术部" value="tech" />
            <el-option label="市场部" value="marketing" />
          </el-select>
        </el-form-item>
        <el-form-item label="调拨状态">
          <el-select v-model="searchForm.status" placeholder="请选择调拨状态" clearable>
            <el-option label="待审批" value="pending" />
            <el-option label="已批准" value="approved" />
            <el-option label="已拒绝" value="rejected" />
            <el-option label="已完成" value="completed" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格区域 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="transferNo" label="调拨单号" width="150" />
        <el-table-column prop="assetName" label="资产名称" width="180" />
        <el-table-column prop="assetCode" label="资产编码" width="120" />
        <el-table-column prop="fromUser" label="调出使用人" width="120" />
        <el-table-column prop="fromDepartment" label="调出部门" width="120" />
        <el-table-column prop="toUser" label="调入使用人" width="120" />
        <el-table-column prop="toDepartment" label="调入部门" width="120" />
        <el-table-column prop="transferDate" label="调拨日期" width="120" />
        <el-table-column prop="status" label="调拨状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusLabel(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button link type="primary" @click="handleView(scope.row)">查看</el-button>
            <el-button 
              v-if="scope.row.status === 'pending'" 
              link type="primary" 
              @click="handleApprove(scope.row)"
            >
              审批
            </el-button>
            <el-button 
              v-if="scope.row.status === 'approved'" 
              link type="primary" 
              @click="handleConfirm(scope.row)"
            >
              确认
            </el-button>
            <el-button 
              v-if="scope.row.status === 'completed'" 
              link type="primary" 
              @click="handlePrint(scope.row)"
            >
              打印
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 发起调拨对话框 -->
    <el-dialog
      v-model="transferDialogVisible"
      title="发起资产调拨"
      width="600px"
    >
      <el-form
        ref="transferFormRef"
        :model="transferForm"
        :rules="transferRules"
        label-width="120px"
      >
        <el-form-item label="选择资产" prop="assetId">
          <el-select v-model="transferForm.assetId" placeholder="请选择资产" style="width: 100%">
            <el-option
              v-for="asset in assetOptions"
              :key="asset.id"
              :label="`${asset.name} (${asset.code})`"
              :value="asset.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="调出使用人" prop="fromUser">
          <el-input v-model="transferForm.fromUser" placeholder="请输入调出使用人" disabled />
        </el-form-item>
        <el-form-item label="调出部门" prop="fromDepartment">
          <el-input v-model="transferForm.fromDepartment" placeholder="请输入调出部门" disabled />
        </el-form-item>
        <el-form-item label="调入使用人" prop="toUser">
          <el-select v-model="transferForm.toUser" placeholder="请选择调入使用人" style="width: 100%">
            <el-option
              v-for="user in userOptions"
              :key="user.id"
              :label="user.name"
              :value="user.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="调入部门" prop="toDepartment">
          <el-input v-model="transferForm.toDepartment" placeholder="请输入调入部门" disabled />
        </el-form-item>
        <el-form-item label="调拨原因" prop="reason">
          <el-input
            v-model="transferForm.reason"
            type="textarea"
            :rows="3"
            placeholder="请输入调拨原因"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="transferDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitTransferForm">提交</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 审批对话框 -->
    <el-dialog
      v-model="approvalDialogVisible"
      title="调拨审批"
      width="500px"
    >
      <el-form
        ref="approvalFormRef"
        :model="approvalForm"
        :rules="approvalRules"
        label-width="100px"
      >
        <el-form-item label="调拨单号">
          <el-input v-model="approvalForm.transferNo" disabled />
        </el-form-item>
        <el-form-item label="资产名称">
          <el-input v-model="approvalForm.assetName" disabled />
        </el-form-item>
        <el-form-item label="调出部门">
          <el-input v-model="approvalForm.fromDepartment" disabled />
        </el-form-item>
        <el-form-item label="调入部门">
          <el-input v-model="approvalForm.toDepartment" disabled />
        </el-form-item>
        <el-form-item label="审批结果" prop="result">
          <el-radio-group v-model="approvalForm.result">
            <el-radio label="approved">同意</el-radio>
            <el-radio label="rejected">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审批意见" prop="comment">
          <el-input
            v-model="approvalForm.comment"
            type="textarea"
            :rows="3"
            placeholder="请输入审批意见"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="approvalDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitApprovalForm">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 搜索表单
const searchForm = reactive({
  transferNo: '',
  assetName: '',
  fromDepartment: '',
  toDepartment: '',
  status: ''
})

// 表格数据
const tableData = ref([
  {
    id: 1,
    transferNo: 'DB20230001',
    assetId: 1,
    assetName: '笔记本电脑',
    assetCode: 'ZC20230001',
    fromUser: '张三',
    fromDepartment: '技术部',
    toUser: '李四',
    toDepartment: '行政部',
    transferDate: '2023-11-15',
    status: 'pending',
    reason: '因技术部人员调整，将笔记本电脑调拨至行政部使用'
  },
  {
    id: 2,
    transferNo: 'DB20230002',
    assetId: 2,
    assetName: '办公桌',
    assetCode: 'ZC20230002',
    fromUser: '王五',
    fromDepartment: '市场部',
    toUser: '赵六',
    toDepartment: '财务部',
    transferDate: '2023-11-10',
    status: 'approved',
    reason: '因部门调整，办公桌调拨至财务部使用'
  }
])

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 50
})

// 资产选项
const assetOptions = ref([
  {
    id: 1,
    name: '笔记本电脑',
    code: 'ZC20230001',
    user: '张三',
    department: '技术部'
  },
  {
    id: 2,
    name: '办公桌',
    code: 'ZC20230002',
    user: '王五',
    department: '市场部'
  }
])

// 用户选项
const userOptions = ref([
  { id: 1, name: '张三', department: '技术部' },
  { id: 2, name: '李四', department: '行政部' },
  { id: 3, name: '王五', department: '市场部' },
  { id: 4, name: '赵六', department: '财务部' }
])

// 发起调拨相关
const transferFormRef = ref()
const transferDialogVisible = ref(false)
const transferForm = reactive({
  assetId: '',
  fromUser: '',
  fromDepartment: '',
  toUser: '',
  toDepartment: '',
  reason: ''
})

const transferRules = reactive({
  assetId: [
    { required: true, message: '请选择资产', trigger: 'change' }
  ],
  toUser: [
    { required: true, message: '请选择调入使用人', trigger: 'change' }
  ],
  reason: [
    { required: true, message: '请输入调拨原因', trigger: 'blur' }
  ]
})

// 审批相关
const approvalFormRef = ref()
const approvalDialogVisible = ref(false)
const approvalForm = reactive({
  id: '',
  transferNo: '',
  assetName: '',
  fromDepartment: '',
  toDepartment: '',
  result: 'approved',
  comment: ''
})

const approvalRules = reactive({
  result: [
    { required: true, message: '请选择审批结果', trigger: 'change' }
  ],
  comment: [
    { required: true, message: '请输入审批意见', trigger: 'blur' }
  ]
})

// 监听资产选择变化，自动填充调出信息
watch(() => transferForm.assetId, (newVal) => {
  if (newVal) {
    const asset = assetOptions.value.find(item => item.id === newVal)
    if (asset) {
      transferForm.fromUser = asset.user
      transferForm.fromDepartment = asset.department
    }
  } else {
    transferForm.fromUser = ''
    transferForm.fromDepartment = ''
  }
})

// 监听调入使用人选择变化，自动填充调入部门
watch(() => transferForm.toUser, (newVal) => {
  if (newVal) {
    const user = userOptions.value.find(item => item.id === newVal)
    if (user) {
      transferForm.toDepartment = user.department
    }
  } else {
    transferForm.toDepartment = ''
  }
})

// 获取调拨状态标签
const getStatusLabel = (status) => {
  const statusMap = {
    pending: '待审批',
    approved: '已批准',
    rejected: '已拒绝',
    completed: '已完成'
  }
  return statusMap[status] || status
}

// 获取调拨状态类型
const getStatusType = (status) => {
  const typeMap = {
    pending: 'warning',
    approved: 'primary',
    rejected: 'danger',
    completed: 'success'
  }
  return typeMap[status] || ''
}

// 搜索
const handleSearch = () => {
  console.log('搜索条件：', searchForm)
  ElMessage.success('搜索成功')
}

// 重置搜索
const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = ''
  })
  ElMessage.success('重置成功')
}

// 发起调拨
const handleAddTransfer = () => {
  // 重置表单
  Object.keys(transferForm).forEach(key => {
    transferForm[key] = ''
  })
  transferDialogVisible.value = true
}

// 提交调拨表单
const submitTransferForm = () => {
  transferFormRef.value.validate((valid) => {
    if (valid) {
      // 实际应该调用API保存数据
      console.log('调拨表单数据：', transferForm)
      ElMessage.success('提交成功')
      transferDialogVisible.value = false

      // 实际应该重新加载数据
    }
  })
}

// 查看调拨详情
const handleView = (row) => {
  ElMessage.info(`查看调拨单 ${row.transferNo} 详情`)
}

// 审批调拨
const handleApprove = (row) => {
  // 填充审批表单
  approvalForm.id = row.id
  approvalForm.transferNo = row.transferNo
  approvalForm.assetName = row.assetName
  approvalForm.fromDepartment = row.fromDepartment
  approvalForm.toDepartment = row.toDepartment
  approvalForm.result = 'approved'
  approvalForm.comment = ''

  approvalDialogVisible.value = true
}

// 提交审批表单
const submitApprovalForm = () => {
  approvalFormRef.value.validate((valid) => {
    if (valid) {
      // 实际应该调用API保存数据
      console.log('审批表单数据：', approvalForm)
      ElMessage.success('审批成功')
      approvalDialogVisible.value = false

      // 实际应该重新加载数据
    }
  })
}

// 确认调拨
const handleConfirm = (row) => {
  ElMessageBox.confirm(
    `确定要确认调拨单 "${row.transferNo}" 吗？`,
    '确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 实际应该调用API
    ElMessage.success('确认成功')
    // 实际应该重新加载数据
  }).catch(() => {
    ElMessage.info('已取消确认')
  })
}

// 打印调拨单
const handlePrint = (row) => {
  ElMessage.success(`正在打印调拨单 ${row.transferNo}...`)
  // 实际应该调用打印功能
}

// 分页大小改变
const handleSizeChange = (size) => {
  pagination.pageSize = size
  // 实际应该重新加载数据
}

// 当前页改变
const handleCurrentChange = (page) => {
  pagination.currentPage = page
  // 实际应该重新加载数据
}
</script>

<style scoped>
.asset-transfer {
  padding: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
